<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{margin: 0;padding: 0}
    ul{
      list-style: none;
    }
    #app{
      margin: 50px auto 0;
      width: 400px;
    }
    .language-list{
      width: 100%;
      display: flex;
      line-height: 50px;
      color: #FFF;
      text-align: center;
    }
    .language-item{
      flex: 1;
      background-color: green;
    }
    .selected{
      background-color: plum;
    }
  </style>
</head>
<body>
<div id="app">

  <ul class="language-list">
    <li v-for="lan in languages"
        class="language-item"
        :class="{selected: lan.isSelected}"
        @click="fn(lan)"
    >
      {{lan.name}}
    </li>
  </ul>

    <div>
      你选择的是：{{language.name}}
    </div>
</div>


<script src="js/vue.js"></script>
<script>
  var vm =new Vue({
    el:'#app',
    data:{
      // 要显示的数据，使用 isSelected 来表示是否被选中状态
      languages:[
        {name:"HTML",isSelected:true},
        {name:"CSS",isSelected:false},
        {name:"JavaScript",isSelected:false},
        {name:"Vue.js",isSelected:false},
      ],
      // 被选择的language
      language: {name:"HTML",isSelected:true}

    },
    methods:{
      fn:function (lan) {
        // 如果点击是已经被选中的，就直接结束
        if(lan.isSelected){
          return;
        }
        // 否则，就改变被点击的项
        // 先把所有的都设置为没有选中的状态
        for(var i=0;i<this.languages.length;i++){
          this.languages[i].isSelected = false;
        }
        // 在把当前项设置为选中
        lan.isSelected = true;
        // 把被选中的语言保存到 language 中
        this.language = lan;
      }
    }
  });
</script>
</body>
</html>
